@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin pct($pct) {
  width: #{$pct};
  position: relative;
  margin: 0 auto;
}

@mixin triangle($width, $height, $color, $direction) {
  $width: $width/2;
  $color-border-style: $height solid $color;
  $transparent-border-style: $width solid transparent;
  height: 0;
  width: 0;

  @if $direction==up {
    border-bottom: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  }

  @else if $direction==right {
    border-left: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }

  @else if $direction==down {
    border-top: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  }

  @else if $direction==left {
    border-right: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }
}

// 文本溢出省略显示
@mixin text-ellipsis($clamp: null) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  @if $clamp {
    overflow: hidden;
    @if $clamp > 1 {
      display: -webkit-box;
      white-space: pre-wrap;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: $clamp;
    }
  }
}

@mixin flex-center($type: null, $dir: null) {
  display: flex;
  align-items: center;

  @if $type {
    justify-content: $type;
  }
  @if $dir {
    flex-direction: $dir;
  }
}

@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

@mixin background-img($url: null) {
  background: url($url) no-repeat;
  background-size: 100% 100%;
}

@mixin dilemma() {
  text-align: justify;
  text-align-last: justify;
}

@mixin absolute-center($position: absolute) {
  position: $position;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@mixin line-left() {
  color: #333;
  font-size: var(--md-size);
  padding-left: 12px;
  position: relative;
  font-weight: bold;
  &::before {
    content: '';
    width: 4px;
    height: 16px;
    background-color: #333;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

@mixin box-shadow() {
  box-shadow: 2px 3px 19px 1px rgba(0, 68, 149, 0.3);
  border-radius: 4px;
}

@mixin scrollY($width: 8px) {
  overflow-y: auto;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: $width; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    // border-radius: 10px;
    box-shadow: inset 0 0 5px #a7a7a7;
    background: #a7a7a7;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px #e7f1ff;
    // border-radius: 10px;
    background: #e7f1ff;
  }
}